<template>
  <div ref="mapRef" class="map_chart"></div>
</template>
  
  <script setup lang="ts">
import { ref } from "@vue/reactivity";
import { onMounted } from "@vue/runtime-core";
import * as echarts from "echarts";
import mapData from "../../assets/mapdata.json";
const mapRef = ref<HTMLDivElement>();
onMounted(() => {
  var myChart = echarts.init(mapRef.value as HTMLDivElement);

  //注册地图名
  echarts.registerMap("chinaMap", mapData as any);
  const option = {
    geo: {
      //地理坐标组件
      map: "chinaMap",
      roam: true, //平移
      zoom: 1.3,
      itemStyle: {
        areaColor: "#99dbff",
        borderColor: "#ffffff",
        shadowColor: "rgba(120,100,50,0.2)",
        shadowBlur: 10,
        /* emphasis:{
                focus:"self"
            } */
      },
    },
    tooltip:{//鼠标靠近显示数据
        trigger:'item'
    },
    /* visualMap:{
        type:"continuous",
        min:100,
        max:5000,
        calculable:true,
        iinRange:{
            color:["#4ab2e5","#52b9c7","#f58414"],
        },
        textStyle:{
            color:"#fff"
        },
    }, */
    series: [
      {
        type: "effectScatter", //散点图
        coordinateSystem: "geo",
        zlevel:1,
        data: [
          { value: [118.80,31.92],itemStyle:{color:"#f56321"} },
          { value: [110.34,41.48],itemStyle:{color:"#f56321"} },
          { value: [116.45,40.25],itemStyle:{color:"#f58414"} },
          { value: [123.12,42.12],itemStyle:{color:"#f56321"} },
          { value: [114.50,38.10],itemStyle:{color:"#f58414"} },
          { value: [117.42,39.42],itemStyle:{color:"#f58414"} },
          { value: [112.33,37.94],itemStyle:{color:"#f58414"} },
          { value: [109.12,34.2],itemStyle:{color:"#f56321"} },
          { value: [103.59,36.3],itemStyle:{color:"#c1bb1f"} },
          { value: [106.36,38.18],itemStyle:{color:"#c1bb1f"} },
          { value: [101.4,36.82],itemStyle:{color:"#c1bb1f"} },
          { value: [108.38,30.44],itemStyle:{color:"#c1bb1f"} },
          { value: [113.08,28.26],itemStyle:{color:"#a6c62c"} },
          { value: [102.92,25.47],itemStyle:{color:"#c1bb1f"} },
        ],
        //设置涟漪效果
        rippleEffect: {
          number: 2, //波纹数量
          scale: 3,
        },
        itemStyle: {
          color: "yellow",
        },
      },
    ],
  };
  // 绘制图表
  myChart.setOption(option);
  //监听窗口更改大小
  window.addEventListener("resize", () => {
    myChart.resize();
  });
});
</script>
  
  <style lang="scss" scoped>
.map_chart {
  width: 100%;
  height: 100%;
}
</style>